<template>
    <view class="system-page">
        <view class="system-nav">
            <uni-nav-bar 
                left-icon="" 
                title="云录制扫码"
                color="#fff"
                backgroundColor="transparent"
                @clickLeft="back"
                :statusBar="true"
                :border="false"
            ></uni-nav-bar>
        </view>
        <view class="system-contain">
            <view class="system-header">
                <view class="system-countdown">
                    <text class="number">{{hour}}</text>
                    <text class="splitor">:</text>
                    <text class="number">{{minute}}</text>
                    <text class="splitor">:</text>
                    <text class="number">{{second}}</text>
                    <!-- <uni-countdown :show-day="false" :hour="2" :minute="30" :second="0" color="#FFFFFF" background-color="#007AFF" :start="false" /> -->
                </view>
                <button type="primary" hover-class="btn_click" class="system-btn system-primary" @click.native.prevent="onStartScanCode">
                    <i class="iconfont icon-saoma btn-icon"></i>
                    <text>开始扫码</text>
                </button>
                <button type="error" hover-class="btn_click" class="system-btn system-error" @click.native.prevent="onStopRecord">
                    <i class="iconfont icon-jieshu btn-icon"></i>
                    <text>结束录制</text>
                </button>
            </view>
        </view>
        <!-- 普通弹窗 -->
        <uni-popup ref="onStopRecord" :maskClick="false">
            <view class="popup-wrap">
                <view class="popup-content">
                    <view class="popup-h">结束录制</view>
                    <view class="popup-p">本次已录制{{num}}次视频</view>
                    <view class="popup-btn">
                        <button hover-class="btn_click" class="popup-error" @click.native.prevent="onCancel">取消</button>
                        <button hover-class="btn_click" class="popup-primary" @click.native.prevent="onSubmit">确认</button>
                    </view>
                </view>
            </view>
        </uni-popup>
    </view>
</template>

<script>
export default {
    name: 'CloudRecordScanCodePage',
    data() {
        return {
            num: 0,
            hour: '00',
            minute: '00',
            second: '00'
        }
    },
    created() {
        // 设置时分秒
        const startTime = this.$store.state.sampleScanCodeStartTime
        const updateTime = () => {
            const date = this.diff(startTime, new Date())
            this.hour = date['hours']
            this.minute = date['minutes']
            this.second = date['seconds']
        }
        // 先执行
        // updateTime()
        // 计时器
        // this.timer = setInterval(updateTime, 1000);
        // 记录已录制数量
        let list = this.$store.state.sampleScanCodeList;
        this.num = list.length;
    },
    beforeDestroy() {
        this.timer && clearInterval(this.timer)
    },
    methods: {
        strFormat(str) {
            return str < 10 ? `0${str}` : str;
        },
        diff(start, end) {
            const duration = this.$Moment.duration(this.$Moment(end).diff(this.$Moment(start)))
            // 获取时间差中的小时数、分钟数和秒数
            const hours = this.strFormat(duration.hours())
            const minutes = this.strFormat(duration.minutes())
            const seconds = this.strFormat(duration.seconds())
            return {
                hours,
                minutes,
                seconds
            }
        },
        back() {
            this.$Router.back();
        },
        change(e) {
            console.log('当前模式：' + e.type + ',状态：' + e.show);
        },
        onStartScanCode() {
            uni.scanCode({
                onlyFromCamera: true,
                scanType: ['qrCode', 'datamatrix', 'pdf417'],
                success: (res) => {
                    if( res.result.includes('sampleId') ) {
                        let url = `/pages/scanCodePrompt/index?${res.result}`;
                        this.$Router.redirect(url);
                    }
                }
            })
        },
        onCancel() {
            this.$refs.onStopRecord.close()
        },
        onSubmit() {
            // 重置表单
            this.$store.commit('CLOUD_RECORD_FORM', {})
            // 关闭
            this.onCancel()
            let url = `/pages/cloudRecordSystem/index`;
            this.$Router.redirect(url);
        },
        onStopRecord() {
            this.$refs.onStopRecord.open('center')
        }
    }
}
</script>

<style lang="scss" scoped>
.system-page {
    height: 100%;
    background-color: #F5F5F5;
    .system-nav {
        height: 350rpx;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-image: url($uni-image-ip+'/clude-nav.png');
    }
    .system-contain {
        display: flex;
        justify-content: center;
        margin-top: -100rpx;
        .system-header {
            border-radius: 20rpx;
            background-color: #ffffff;
            width: 678rpx;
            min-height: 766rpx;
            box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(44, 51, 44, 0.5);
            display: flex;
            flex-direction: column;
            align-items: center;
            .form-point {
                width: 200rpx;
                height: 236rpx;
                background-repeat: no-repeat;
                background-size: 100% 100%;
                background-image: url($uni-image-ip+'/clude-point.png');

                margin-top: 30rpx;
            }
            .form-text {
                font-family: PingFangSC, PingFang SC;
                font-weight: 500;
                font-size: 30rpx;
                color: #4F77FC;
                line-height: 40rpx;

                margin-top: 48rpx;
            }
            .system-form {
                width: 100%;
                margin-top: 50rpx;
            }
            .system-btn {
                width: 94%;
                font-size: 28rpx;
                height: 78rpx;
                line-height: 78rpx;
                color: #fff;
                display: flex;
                align-items: center;
                justify-content: center;
            }
            .system-primary {
                background-color: $uni-color-primary;
                margin-bottom: 50rpx;
            }
            .system-error {
                background-color: $uni-color-error;
            }
            .btn-icon {
                font-size: 32rpx;
                margin-right: 14rpx;
            }
            .system-countdown {
                margin-top: 100rpx;
                margin-bottom: 90rpx;
                font-size: 32rpx;
                color: #fff;
                visibility: hidden;
                .number {
                    width: 80rpx;
                    height: 70rpx;
                    line-height: 70rpx;
                    border-radius: 10rpx;
                    background-color: $uni-color-primary;
                    display: inline-block;
                    text-align: center;
                }
                .splitor {
                    color: rgb(51, 51, 51);
                    display: inline-block;
                    text-align: center;
                    line-height: 70rpx;
                    margin-left: 20rpx;
                    margin-right: 20rpx;
                }
            }
        }
    }
    .popup-wrap {
        padding-left: 40rpx;
        padding-right: 40rpx;
    }
    .popup-content {
        background-color: rgba(255,255,255,1);
        text-align: center;
        padding-left: 30rpx;
        padding-right: 30rpx;
        border-radius: 20rpx;
        .popup-h {
            color: #1D2129;
            font-size: 34rpx;
            line-height: 44rpx;
            padding-top: 44rpx;
            padding-bottom: 44rpx;
        }
        .popup-p {
            color: #1D2129;
            font-size: 26rpx;
        }
        .popup-btn {
            padding-top: 44rpx;
            padding-bottom: 44rpx;
            display: flex;
            .popup-error {
                width: 124rpx;
                height: 66rpx;
                font-size: 24rpx;
            }
            .popup-primary {
                width: 124rpx;
                height: 66rpx;
                font-size: 24rpx;
                background-color: $uni-color-primary;
                color: #fff;
                margin-left: 30rpx;
            }
        }
    }
}
</style>